<template>
    <div class="avue-top">
        <div class="top-bar__left">
            <div class="avue-breadcrumb"
                 :class="[{ 'avue-breadcrumb--active': isCollapse }]"
                 v-if="setting.collapse&&!isHorizontal">
                <i class="icon-navicon"
                   @click="setCollapse"></i>
            </div>
        </div>
        <div class="top-bar__title">
            <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
            <top-search class="top-bar__item" v-if="setting.search"></top-search>
        </div>
        <div class="top-bar__right">
            <div v-if="setting.lock"
                 class="top-bar__item">
                <top-lock></top-lock>
            </div>
            <div v-if="setting.theme"
                 class="top-bar__item">
                <top-theme></top-theme>
            </div>
            <!--  <div class="top-bar__item">-->
            <!--    <top-lang></top-lang>-->
            <!--  </div>-->
            <div class="top-bar__item" v-if="setting.fullscren">
                <top-full></top-full>
            </div>
            <div class="top-bar__item"
                 v-if="setting.debug">
                <top-logs></top-logs>
            </div>
            <div class="top-bar__item">
<!--                 <top-notice></top-notice>-->
                <topMsg></topMsg>
            </div>
            <!--  头像 -->
            <div class="top-user">
                <img class="top-bar__img" :style="isWsOnline?'border: 1px solid #eee' : 'border: 1px solid red' " :src="userInfo.headPic">
                <!--  <img class="top-bar__img" :style="isOnline?'border: 1px solid #eee' : 'border: 1px solid red' " :src="userInfo.headPic">-->
                <el-dropdown>
                    <span class="el-dropdown-link">
                      {{ userInfo.username }}
                         <el-ArrowDown style="width: 1em; height: 1em; margin-right: 8px;margin-left: 5px;"/>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>
                                <router-link to="/wel">{{ $t('navbar.dashboard') }}</router-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
                            </el-dropdown-item>
                            <!--   <el-dropdown-item>-->
                            <!--       <router-link to="/info/setting">{{ $t('navbar.setting') }}</router-link>-->
                            <!--   </el-dropdown-item>-->
                            <el-dropdown-item @click="logout"
                                              divided>{{ $t('navbar.logOut') }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <top-setting></top-setting>
            </div>
        </div>
    </div>
</template>
<script>
import {mapGetters} from "vuex";
import topLock from "./top-lock.vue";
import topMenu from "./top-menu.vue";
import topSearch from "./top-search.vue";
import topTheme from "./top-theme.vue";
import topLogs from "./top-logs.vue";
import topLang from "./top-lang.vue";
import topMsg from "./top-msg.vue";
import topFull from "./top-full.vue";
import topSetting from "../setting.vue";

export default {
    components: {
        topLock,
        topMenu,
        topSearch,
        topTheme,
        topLogs,
        topLang,
        topFull,
        topSetting,
        topMsg,
    },
    name: "top",
    data() {
        return {
            isWsOnline: false
        };
    },
    filters: {},
    created() {
        this.checkWebSocketState();
    },
    computed: {
        ...mapGetters([
            "setting",
            "userInfo",
            "tagWel",
            "tagList",
            "isCollapse",
            "tag",
            "logsLen",
            "logsFlag",
            "isHorizontal"
        ])
    },
    methods: {
        setCollapse() {
            this.$store.commit("SET_COLLAPSE");
        },
        logout() {
            this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                confirmButtonText: this.$t("submitText"),
                cancelButtonText: this.$t("cancelText"),
                type: "warning"
            }).then(() => {
                this.$store.dispatch("LogOut").then(() => {
                    // websocket 在线状态退出
                    this.$store.dispatch('webSocketOut');
                    // 跳转到登录页
                    this.$router.push({path: "/login"});
                });
            });
        },
        /**
         * 检查 websocket 在线状态
         * 调用者 this
         * 调用者 this 需存在 isOnline 参数, 改方法实时变更 isOnline 值 (利用 vue 双向绑定机制), 在线 true / 不在线 false
         */
        async checkWebSocketState() {
            let thin = this;
            setInterval(() => {
                // console.log("websocket在线状态:" + thin.socket.readyState)
                if (thin.$store.getters.ws.readyState === WebSocket.OPEN) {
                    thin.isWsOnline = true;
                } else if (thin.$store.getters.ws.readyState === WebSocket.CLOSED) {
                    thin.isWsOnline = false;
                }
            }, 2000)
        },
    }
};
</script>

<style lang="scss" scoped>
</style>